<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登入 - 【wang】</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="{__STATIC_WANG__}layui/css/layui.css" media="all">
    <link rel="stylesheet" href="{__STATIC_WANG__}style/admin.css" media="all">
    <link rel="stylesheet" href="{__STATIC_WANG__}style/login.css" media="all">
</head>
<style>
    /*登录div的设置*/
    .container {
        width: 280px;
        height: 320px;
        min-height: 320px;
        max-height: 320px;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        padding: 20px;
        z-index: 130;
        border-radius: 8px;
        background: rgba(255, 255, 255, .2);
        box-shadow: 0 3px 18px rgba(100, 0, 0, .5);
        font-size: 16px;

    }

    .close {
        /*background-color: white;*/
        background: rgba(255, 255, 255, .2);
        border: none;
        font-size: 18px;
        margin-left: 280px;
        margin-top: -10px;
    }

    .layui-input {
        border-radius: 5px;
        width: 210px;
        height: 40px;
        font-size: 15px;
    }

    .layui-form-item {
        margin-left: -20px;
    }

    #logoid {
        margin-top: -16px;
        padding-left: 150px;
        padding-bottom: 15px;
    }

    .layui-btn {
        border-radius: 5px;
        width: 210px;
        height: 40px;
        font-size: 15px;
    }

    .verity {
        width: 120px;
    }

    .font-set {
        font-size: 13px;
        text-decoration: none;
        margin-left: 120px;
    }

    a:hover {
        text-decoration: underline;
    }

    .icon-name {
        background-image: url(/static/admin/image/login/user.png); /*这里放置图标的绝对路径*/
        background-repeat: no-repeat;
        background-size: 18px 18px;
        padding-left: 32px;
        background-position: 8px 8px;
    }

    .icon-pass {
        background-image: url(/static/admin/image/login/locked.png); /*这里放置图标的绝对路径*/
        background-repeat: no-repeat;
        background-size: 18px 18px;
        padding-left: 32px;
        background-position: 8px 8px;
    }

    * {
        padding: 0;
        margin: 0;
    }

    #box {
        position: relative;
        width: 150px;
        height: 40px;
        margin: 0 0 0 60px;
        margin-top: 10px;
        background-color: #e8e8e8;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
        border-radius: 5px;
    }

    .bgColor {
        position: absolute;
        left: 0;
        top: 0;
        width: 40px;
        height: 40px;
        background-color: lightblue;
    }

    .txt {
        position: absolute;
        width: 100%;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        color: #000;
        /*text-align: center;*/
    }

    .slider {
        position: absolute;
        left: 0;
        top: 0;
        width: 38px;
        height: 38px;
        border: 1px solid #ccc;
        background: #fff;
        text-align: center;
        cursor: move;
        border-radius: 5px;
    }

    .slider > i {
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .slider.active > i {
        color: green;
    }

</style>
<body background="/static/admin/image/login/login-background.jpg">
<form class="layui-form" action="{:url('login')}" method="post">
    <div class="container">
        <button class="close" title="关闭">X</button>
        <div class="layui-form-item" style="text-align: center;">
            <label style="margin: 0 auto;color: white">wang 后台登录系统</label>

        </div>
        <div class="layui-form-item">
            <div style="padding-left: 60px;">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入用户名" autocomplete="off"
                       class="layui-input icon-name">
            </div>
        </div>
        <div class="layui-form-item">
            <div style="padding-left: 60px;">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                       autocomplete="off" class="layui-input icon-pass">
            </div>
        </div>
        <div class="layui-form-item">
            <div style="padding-left: 60px;" id="box" onselectstart="return false;">
                <div class="bgColor"></div>
                <div class="txt">滑动解锁</div>
                <!--给i标签添加上相应字体图标的类名即可-->
                <div class="slider"><i class="iconfont icon-double-right"></i></div>
            </div>

        </div>

        <div class="layui-form-item">
            <div style="padding-left: 60px;">
                <button id="myForm" class="layui-btn" lay-submit lay-filter="formDemo">登陆</button>
            </div>
        </div>
    </div>
</form>


<script src="{__STATIC_WANG__}layui/layui.js"></script>
<script type="text/javascript" src="{__STATIC_WANG__}jquery.min.js"></script>

<script>
    layui.config({
        base: '{__STATIC_WANG__}' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'user', 'form'], function () {
        var $ = layui.$
            , setter = layui.setter
            , admin = layui.admin
            , form = layui.form
            , router = layui.router()
            , search = router.search;


        $('body').keydown(function () {
            if (event.keyCode == '13') {
               return false;
            }
        });



        form.on('submit(formDemo)', function (data) {
            var txt = getEle(".txt");
            if (txt.innerHTML != '解锁成功') {
                layer.msg('请移动滑块解锁', {
                    icon: 2
                    , time: 1000
                })
                return false;
            }

            $.ajax({
                url: data.form.action,
                type: data.form.method,
                dataType: 'json',
                data: $(data.form).serialize(),
                success: function (result) {
                    if (result.code == 1) {
                        layer.msg(result.msg, {icon: 1, time: 1500, shade: 0.1}, function (index) {
                            window.location.href = result.url;
                        });
                    } else {
                        layer.msg(result.msg, {icon: 2, time: 1500, shade: 0.1}, function (index) {
                            layer.close(index);
                        });
                    }
                },
                error: function (xhr, state, errorThrown) {
                    layer.msg(state + '：' + errorThrown);
                }
            });
            return false;


        });


    });

    //一、定义了一个获取元素的方法
    function getEle(selector) {
        return document.querySelector(selector);
    }

    //二、获取到需要用到的DOM元素
    var box = getEle("#box"),//容器
        bgColor = getEle(".bgColor"),//背景色
        txt = getEle(".txt"),//文本
        slider = getEle(".slider"),//滑块
        icon = getEle(".slider>i"),
        successMoveDistance = box.offsetWidth - slider.offsetWidth,//解锁需要滑动的距离
        downX,//用于存放鼠标按下时的位置
        isSuccess = false;//是否解锁成功的标志，默认不成功

    //三、给滑块添加鼠标按下事件
    slider.onmousedown = mousedownHandler;

    //3.1鼠标按下事件的方法实现
    function mousedownHandler(e) {
        bgColor.style.transition = "";
        slider.style.transition = "";
        var e = e || window.event || e.which;
        downX = e.clientX;
        //在鼠标按下时，分别给鼠标添加移动和松开事件
        document.onmousemove = mousemoveHandler;
        document.onmouseup = mouseupHandler;
    };

    //四、定义一个获取鼠标当前需要移动多少距离的方法
    function getOffsetX(offset, min, max) {
        if (offset < min) {
            offset = min;
        } else if (offset > max) {
            offset = max;
        }
        return offset;
    }

    //3.1.1鼠标移动事件的方法实现
    function mousemoveHandler(e) {
        var e = e || window.event || e.which;
        var moveX = e.clientX;
        var offsetX = getOffsetX(moveX - downX, 0, successMoveDistance);
        bgColor.style.width = offsetX + "px";
        slider.style.left = offsetX + "px";

        if (offsetX == successMoveDistance) {
            success();
        }
        //如果不设置滑块滑动时会出现问题（目前还不知道为什么）
        e.preventDefault();
    };

    //3.1.2鼠标松开事件的方法实现
    function mouseupHandler(e) {
        if (!isSuccess) {
            bgColor.style.width = 0 + "px";
            slider.style.left = 0 + "px";
            bgColor.style.transition = "width 0.8s linear";
            slider.style.transition = "left 0.8s linear";
        }
        document.onmousemove = null;
        document.onmouseup = null;
    };

    //五、定义一个滑块解锁成功的方法
    function success() {
        isSuccess = true;
        txt.innerHTML = "解锁成功";
        bgColor.style.backgroundColor = "lightgreen";
        slider.className = "slider active";
        icon.className = "iconfont icon-xuanzhong";
        //滑动成功时，移除鼠标按下事件和鼠标移动事件
        slider.onmousedown = null;
        document.onmousemove = null;
    };

</script>
</body>

</html>